<template>
  <button @click="custom">通过自定义事件</button>
  <div class="Son1">Son2通过事件总线向Son1传值</div>
</template>

<script setup lang="ts">
// 借助父组件传参
import { ref, onMounted } from 'vue';
// 自定义事件
const color = ref<string>('#7a9e44');
// const emit = defineEmits(['on-click']);
const emit = defineEmits<{
  (e: 'on-click', color: any): void;
}>();
const custom = (): void => {
  emit('on-click', color);
};
// onMounted(() => {
//   custom();
// });

// 局部使用事件总线，Son2传值给Son1
import Bus from '@/utils/Bus';
const colorSon2 = ref<string>('');
Bus.on('clickSon2', (color2: any) => {
  colorSon2.value = color2.value;
});

// 使用 局部Mitt
import mitter from '@/utils/Mitt';
mitter.on('mitterTest1', (mitterTest1: any) => {
  console.log(mitterTest1.value);
});
// 使用 全局Mitt
// getCurrentInstance不推荐使用 推荐在main.js中provide app.provide('全局变量名',值)
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance(); // 获取当前组件实例
instance?.proxy?.$Mitter.on('mitterTest2', (mitterTest2: any) => {
  console.log(mitterTest2.value);
});
</script>

<style lang="scss" scoped>
.Son1 {
  width: 100px;
  height: 100px;
  background-color: v-bind(colorSon2);
}
</style>
